<template>
<div class="ViewtriggerObject">
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px" class="">
    <el-form-item prop="userName2">
      <el-select v-model="queryParams.userName2" filterable placeholder="选择所属企微号">
        <el-option
          v-for="item in userList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="userName2">
      <div class="search">
        <el-input v-model="queryParams.userName1" size="small" placeholder="搜客户" clearable/>
        <el-button icon="el-icon-search" size="small"></el-button>
      </div>
    </el-form-item>
    <el-form-item prop="userName2">
      <el-select v-model="queryParams.userName2" size="small" filterable placeholder="发送状态">
        <el-option
          v-for="item in userList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="userName3">
      <div class="right-big">
        <el-date-picker
          v-model="dateRange1"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          size="small"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
      </div>
    </el-form-item>
    <el-button  size="small" plain>重置</el-button>
  </el-form>
  <el-table
    :data="recordDataList"
    ref="companylabelList"
  >
    <el-table-column
      :label="item.label"
      align="left"
      v-for="(item, index) in recordTableColumns"
      :key="index"
      :prop="item.key"
      :min-width="item.minWidth ? item.minWidth : ``"
      :fixed="item.fixed ? item.fixed : false"
      :show-overflow-tooltip="true"
    >
      <!--用于表格自定义-->
      <template slot-scope="scope">
        <div v-if="item.key=='name'">
          <div class="userInfo">
            <img src="@/assets/images/profile.jpg"/>
            <div class="name">小城红</div>
            <div class="label">@志新</div>
          </div>
        </div>
        <div v-else-if="item.key=='code'">
          <div class="userInfo">
            <img src="@/assets/images/profile.jpg"/>
            <div class="name">小城红</div>
            <div class="label">@志新</div>
          </div>
        </div>
        <div v-else>{{ scope.row[item.key] }}</div>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="80">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handerView">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <viewSendContent v-if="showViewSendContent" :visableIf.sync="showViewSendContent"></viewSendContent>
</div>
</template>
<script>
export default {
  name: "ViewtriggerObject",
  components: {
    'viewSendContent': () => import('./viewSendContent.vue'),//行为标签
  },
  data(){
    return{
      showViewSendContent:false,
      userList: [
        {value: '0', label: '等待中'},
        {value: '1', label: '进行中'},
      ],
      recordDataList: [],
      recordHeight: 600,
      dateRange1:[],
      recordTableColumns: [
        {key: 'name', label: `客户`, visible: true, minWidth: 150, fixed: true},
        {key: 'label', label: `触发时间`, visible: true, minWidth: 150, fixed: false},
        {key: 'code', label: `所属企微号`, visible: true, minWidth: 150, fixed: false},
        {key: 'time', label: `发送消息`, visible: true, minWidth: 150, fixed: false},
        {key: 'time', label: `发送状态`, visible: true, minWidth: 150, fixed: false},
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        userName2: null,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      total: 8, // 表格的总条数
    }
  },
  created() {
    this.recordDataList = [];
    for (let i = 0; i < 3; i++) {
      let obj = {
        name: '小红',
        label: '18207418337',
        code: '111',
        time: '2012-08-12'
      }
      this.recordDataList.push(obj);
    }
  },
  methods:{
    handerView(){
      this.showViewSendContent=true;
    },
  },

}
</script>



<style scoped lang="scss">
.ViewtriggerObject {
  padding: 15px;
}
.search {
  display: flex;

  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }

  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
.userInfo{
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }
  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
